<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>产康预约</title>

  <#assign base=request.contextPath  />
    <base id="basePath" href="${base}">

    <base id="basePath" href="${base}">
    <link rel="stylesheet" href="${base}/css/demo.css" type="text/css">
    <link rel="stylesheet" href="${base}/css/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="${base}/js/ztree/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="${base}/js/ztree/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="${base}/js/zhang.js"></script>
    <script type="text/javascript" src="${base}/js/ztree/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="${base}/js/ztree/jquery.ztree.exedit.js"></script>


    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${base}/js/layui/css/layui.css"  media="all">
    <script type="text/javascript" src="${base}/js/zhang.js"></script>

</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>产康预约</legend>
</fieldset>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">可预约</li>
        <li>已预约</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            <div class="layui-tab-content">
                <div class="layui-inline layui-form">
                    <div class="layui-input-inline">
                        <select name="interest"  id="home1"  lay-search="">
                            <option value="">请根据房间号选择</option>
                        </select>
                    </div>
                </div>
                <table class="layui-table" lay-data="{page: {
                                           layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                                           ,theme: '#0092EF'
                                           ,limit:20
                                         }
                                         ,height:500
                                         ,where: {stat: '1'}
                                         ,url: '${base}/production/selectProduction'}" >
                    <thead>
                    <tr>
                        <th lay-data="{field:'id', templet:function(val){return val.LAY_INDEX},align: 'center'}">id</th>
                        <th lay-data="{field:'project', align: 'center'}">产康项目</th>
                        <th lay-data="{field:'pice',align: 'center'}">价格</th>
                        <th lay-data="{field:'appointment',templet:function(val){if(val.appointment=='1'){return '可预约';}else{return '不可预约';
                                                                }},align: 'center'}">状态</th>
                        <th lay-data="{field: 'right', align: 'center', toolbar: '#barDemo'}">操作</th>
                    </tr>
                    </thead>
                </table>
                <script type="text/html" id="barDemo">
                    {{#  if(d.appointment ==1){ }}
                    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail" style="Color:red;" href="javascript:void(0)"  onclick="Reservable('{{d.id}}')">预约</a>
                    {{#  } else { }}
                    <!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail" style="Color:blue;">不可预约</a>-->
                    {{#  } }}
                </script>
            </div>
        </div>
        <div class="layui-tab-item">
            <div class="layui-tab-content">
                <div class="layui-inline layui-form">
                    <div class="layui-input-inline">
                        <select id="home2" lay-filter="home2"  >
                        <#-- <option value="">请根据房间号选择</option>-->
                        </select>
                    </div>
                </div>
            </div>
            <table class="layui-hide" id="table_baby" lay-filter="user"></table>
            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">可预约</a>
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">不可预约</a>
            </script>
        </div>
    </div>
</div>

<script src="${base}/js/layui/layui.js" charset="utf-8"></script>
<script src="${base}/js/jquery.min.js"></script>
<script>

    layui.use(['element','table'], function(){
        var table = layui.table
        var $ = layui.jquery
                ,element = layui.element;
        table.render({
            elem: '#table_baby'
            ,url: '${base}/production/findProjectByHomeId?flag=1'//数据接口
            ,cols: [[
                {field:'id',templet:function(val){
                        return val.LAY_INDEX
                    }, title: 'ID',align:'center'}
                ,{field:'project', title: '产康项目',align:'center'}
                ,{field:'pice', title: '价格',align:'center'}


            ]]
            ,id: 'testReload'

            ,page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
                ,theme: '#0092EF'
                ,limit:20
            }
            ,where:{"homeId":$("#home2").val()}
        });


//事件绑定
        layui.form.on('select(home2)', function(data){
            home2Chang();
        });


    });


    //触发事件
    var active = {
        tabChange: function(){
            //切换到指定Tab项
            element.tabChange('demo', '22');
        }
    };



    /* //  可预约 那个房间添加那个项目
     function onSubmit(){
     var id = $("#id").val();
     var project = $("#project").val();
     var price = $("#price").val();
     //alert("开始执行ajax")
         $.ajax({
             type:"POST",
             url:"${base}/production/insertProduction",
         data:{"id":id,"project":project,"pice":price},
         success:function(data){
         alert预约成功("添加成功")
             var table = layui.table;
                          //表刷新方法
                         table.reload('testReload', {
                         url: '${base}/production/selectProduction'
                         ,where: {}, //设定异步数据接口的额外参数
                         //height: 300
                         });
                         $(".tk8").hide(200)
                     }

     });
 }*/




    //获取已预约房间id
    var bas = "${base}"
    //home_data:变量  = zhang.js里边封装的名称(路径,"字典表里边的code")
    var home_data = getDataByDicCode(bas,"home")
    for(var i=0;i<home_data.length;i++){
        $("#home1").append(
                ' <option value="'+home_data[i].id+'">'+home_data[i].name+'</option>'
        );
        //如果是第一次循环 就给第一个默认选择
        if(i==0){
            $("#home2").append(
                    ' <option selected value="">请根据房间号选择</option>'
            )
            $("#home2").append(
                    ' <option  value="'+home_data[i].id+'">'+home_data[i].name+'</option>'
            )
        }else{
            $("#home2").append(
                    ' <option value="'+home_data[i].id+'">'+home_data[i].name+'</option>'
            )
        }

    }

    // 预约
    function Reservable(project_id){
        if($("#home1").val()==0){
            //layui提示框
            layer.msg("请先选择一个房间");
            return;
        }
        $.ajax({
            type:"POST",
            url:"${base}/relationProject/insertProjectRelation",
            data:{"relationId":$("#home1").val(),"projectId":project_id,"inside":1},
            async:false,
            success:function(data){
                //弹出提示框
                layer.msg(data);
                home2Chang();

            }
        });
    }

    //第二个选项卡的选择事件
    function home2Chang(){
        var homeId=$("#home2").val()
        var table = layui.table;
        //表刷新方法
        table.reload('testReload', {
            url: '${base}/production/findProjectByHomeId'
            ,where: {"homeId":homeId} //设定异步数据接口的额外参数
            //height: 300
        });
    }



    /*//获取已预约房间id
    var bas = "${base}"
//home_data:变量  = zhang.js里边封装的名称(路径,"字典表里边的code")
var home2 = getDataByDicCode(bas,"home")
for(var i=0;i<home2.length;i++){
$("#home2").append(
    ' <option value="'+home2[i].id+'">'+home2[i].name+'</option>'
);
}*/

</script>

</body>
</html>